<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>index</title>
	<style>
		.active{
			background:red;
		}
	</style>
	<script src="http://localhost:8088/socket.io/socket.io.js"></script>
	<script>
		const sock = io.connect("ws://localhost:8088");
		window.onload = function(){
			var current_name = null;
			function $(dom){
				return document.querySelector(dom)
			};

			/**
			 * 注册返回值
			 * @param  {[type]} "reg_ret" [返回注册状态借口]
			 * @param  {[type]} (code,msg [状态码，数据m s g
			 * ]
			 * @return {[type]}           [description]
			 */
			sock.on("reg_ret",(code,msg)=>{
				if(code){
					alert("注册失败"+msg)
				}else{
					alert("注册成功")
				}
			});
			sock.on('log_ret',(code,msg)=>{
				if(code){
					alert("登录失败"+msg)
				}else{
					alert("登录成功")
				}
			});
			//连接返回信息
			sock.on('link_ret',(code,msg)=>{
				if(code){
					alert("连接失败"+msg)
				}else{
					alert("连接成功")
				}
			});
			//发送信息返回
			sock.on("msg_ret",(code,msg)=>{
				if(code){
					alert("发送失败"+msg)
				}else{
					var oLi = document.createElement("li");
					oLi.innerHTML = `<h4>'${current_name}'</h4><p>'${$("#textval").value}'</p>`;
					oLi.className = "active";
					$(".listInf").appendChild(oLi);
					$("#textval").value = ''
				}
			});
			//接受其他用户发送的消息
			sock.on("msg",(name,txt)=>{
				var oLi = document.createElement("li");
				oLi.innerHTML = `<h4>'${name}'</h4><p>'${txt}'</p>`;
				$(".listInf").appendChild(oLi);
			})
			$('#sigin_btn').onclick=function(){
				sock.emit("reg",$("#user").value,$("#pass").value);
			};
			$("#login_btn").onclick = function(){
				sock.emit("log",$("#user").value,$("#pass").value);
				current_name = $("#user").value
			};
			$(".link").onclick = function(){
				sock.emit("linkin",$("#senduser").value)
			};
			$("#sendInf").onclick =function(){
				sock.emit("msg",$("#textval").value);
			}
		}
	</script>
</head>
<body>
	<input type="text" id="user" />
	<input type="password" id="pass" />
	<input type="button" id="sigin_btn" value="注册" />
	<input type="button" id="login_btn" value="登录" />
	<hr>
	通信人名称:<input type="text" id="senduser" /><br />
	<input type="button" class="link" value="连接">
	<hr>
	<textarea id="textval" cols="30" rows="10"></textarea>
	<ul class="listInf">
<!-- 		<li>
			<h4></h4>
			<p></p>
		</li> -->
	</ul>
	<input type="button" id="sendInf" value="发送吧小宇宙">
</body>
</html>